<template>
	<view class="container">
		<view class="header">
			<uni-icons type="left" class="back-icon" color="#ffffff"></uni-icons>
			<text class="title">物资录入列表</text>
		</view>

		<!-- 筛选条件 -->
		<view class="selectType">
			<text class="label">所在场区</text>
			<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
		</view>
		<view class="selectType">
			<text class="label">物资类型</text>
			<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
		</view>
		<view class="selectType">
			<text class="label">录入时间</text>
			<timePicker class="time-picker"></timePicker>
		</view>

		<view style="border-bottom: 1rpx solid #000000; width: 100%; padding-top: 20rpx;"></view>

		
		<!-- 商品列表展示 -->
		<view class="content">
			<listContent :goodsList="goodsList"></listContent>  <!-- 传递商品列表数据 -->
		</view>
		<view class="content">
			<listContent :goodsList="goodsList"></listContent>  <!-- 传递商品列表数据 -->
		</view>
		<view class="content">
			<listContent :goodsList="goodsList"></listContent>  <!-- 传递商品列表数据 -->
		</view>
		<view class="content">
			<listContent :goodsList="goodsList"></listContent>  <!-- 传递商品列表数据 -->
		</view>
		<view class="content">
			<listContent :goodsList="goodsList"></listContent>  <!-- 传递商品列表数据 -->
		</view>
		
		<!-- 用于跳转的按钮 -->
		<view class="content">
			<button type="primary" class="bottom_button" @click="goto('/pages/goods/addListContent')"> + 新增物资录入</button>
		</view>
		
		
		
	</view>
</template>

<script>
	import listContent from './contentShow/listContent.vue';
	import timePicker from './contentShow/timePicker.vue';
	import { getGoodsList } from '@/api/goods.js';

export default {
	components: {
		listContent,
		timePicker
	},
	data() {
		return {
			queryParams: {
				pageNum: 1,
				pageSize: 10
			},
			value: 0,
			range: [
				{ value: 0, text: "全部" },
				{ value: 1, text: "药品" },
				{ value: 2, text: "耗材" },
				{ value: 3, text: "设施" },
				{ value: 4, text: "兽药" },
				{ value: 5, text: "疫苗" },
				{ value: 6, text: "饲料" }
			],
			goodsList: []  // 用来存储接口返回的数据
		};
	},
	methods: {
		DataList() {
			getGoodsList(this.queryParams).then(res => {
				if (res && res.data) {
					this.goodsList = res.data.list || [];  // 将接口返回的数据存储到 goodsList 中
				}
			}).catch(err => {
				console.error('获取商品列表失败', err);
			});
		},
		change(e) {
			console.log("筛选条件变化:", e);
		},
		goto(url){
			uni.navigateTo({
				url:url
			})
		}
	},
	created() {
		this.DataList();  // 在组件创建时加载商品数据
	}
}
</script>

<style lang="scss" scoped>

	.container {
	}
	
	.header {
		width: 100%;
		height: 100rpx;
		background-color: #0000ff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.back-icon {
		position: absolute;
		left: 20rpx;
		font-size: 40rpx;
		color: #ffffff;
	}

	.title {
		font-size: 36rpx;
		color: #ffffff;
	}

	.selectType {
		display: flex;
		align-items: center;
		padding: 10rpx 30rpx;
		background-color: #f5f5f5;
		flex-wrap: nowrap;
	}

	.label {
		font-size: 28rpx;
		margin-right: 10rpx;
		color: #333;
		white-space: nowrap;
	}

	.time-picker {
		flex: 1;
		font-size: 28rpx;
	}

	.content {
		width: 100%;
		padding: 0 30rpx;
	}

	.content>contentShow {
		margin-bottom: 20rpx;
	}
	.bottom_button{
		width: 70%;
	}

</style>
